<%--
  Created by IntelliJ IDEA.
  User: LT
  Date: 2018-10-25
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/statics/hplus/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/statics/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/statics/hplus/js/jquery.min.js"></script>
    <link href="${pageContext.request.contextPath}/statics/hplus/css/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/bootstrapvalidator/bootstrapValidator.min.css">
    <script src="${pageContext.request.contextPath}/statics/hplus/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script>
        function searcha() {
            //返回表格的 Options。
            var opts = $("#taocan").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var username = $("#username").val() ;
            $.post("${pageContext.request.contextPath}/taocan/queryByName",{'name':username,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#taocan").bootstrapTable('load',data) ;
            })
        }

        $(function () {
            <!--套餐--校验框架-->
            $(function () {
                $('#jiaoy').bootstrapValidator({
                    message: '',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        taocan_Name: {
                            message: '',
                            validators: {
                                notEmpty: {
                                    message: '项目名称不能为空！'
                                }
                            }
                        },
                        taocan_Jiage: {
                            message: '',
                            validators: {
                                notEmpty: {
                                    message: '售价不能为空！'
                                },
                                regexp: {
                                    regexp: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
                                    message: '售价只能为整数或者小数！'
                                }
                            }
                        },
                        shiyong_Date: {
                            message: '',
                            validators: {
                                notEmpty: {
                                    message: '有效期不能为空！'
                                },
                                digits: {
                                    message: '该值只能包含数字。'
                                }
                            }
                        },
                    }
                });
            });



            <!--套餐--校验框架-->
            $(function () {
                $('#hh').bootstrapValidator({
                    message: '',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        shangpin_Name: {
                            message: '',
                            validators: {
                                notEmpty: {
                                    message: '商品名称不能为空！'
                                }
                            }
                        },
                        shangpin_Shoujia: {
                            message: '',
                            validators: {
                                notEmpty: {
                                    message: '商品售价不能为空！'
                                },
                                regexp: {
                                    regexp: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
                                    message: '商品售价只能为整数或者小数！'
                                }
                            }
                        },
                    }
                });
            });

            $("#taocan").bootstrapTable({
                url:'${pageContext.request.contextPath}/taocan/queryByName',
                //设置每页多少条数据
                pageSize:2,
                pageList:[2,4,8,16],
                height:380,

                pageNumber:1,
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
                sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        username:$("#username").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        field:'taocan_Id',
                        title:'套餐编号'
                    },
                    {
                        field:'taocan_Name',
                        title:'套餐名称'
                    },
                    {
                        field:'taocan_Jiage',
                        title:'套餐售价'
                    },
                    {
                        field:'shiyong_Date',
                        title:'有效期'
                    },
                    {
                        field:'zhuangtai_Name',
                        title:'状态'
                    },
                    {
                        title:'操作',
                        formatter:function(value,row,index){
                            return "<button class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\".bs-example-modal-sm\"" +
                                "style='background-color: red;color: white;border:1px solid red;" +
                                "font-size: 14px' onclick='javascript:del("+row.taocan_Id+")'>删除</button>"+

                                "<button class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\".bs-example-modal-sm\"" +
                                " style='margin-left: 10px;font-size: 14px;' onclick='javascript:ud("+row.taocan_Id+")'>修改</button>"+

                                "<button class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\".bs-example-modal-sm\"" +
                                " style='margin-left: 10px;font-size: 14px;background-color: yellowgreen' onclick='javascript:uid("+row.taocan_Id+")'>套餐详情</button>"
                        }
                    }
                ]
            }) ;

            // 下拉框查询绑定客户
            $.post('/dPxianzhi/queryAll',function (data) {
                var opt = "";
                $.each(data,function (index,item) {
                    var cid = item.dp_Id;
                    var cname = item.dp_Name;
                    opt +="<option value="+cid+">"+cname+"</option>";
                    // alert(cid+"---"+cname);
                })
                $("select[name='dp_Id']").html(opt)
            }) ;
        }) ;

        /**
         * 根据id删除服务信息
         */
        var kids;
        function del(kids){
            taocan_Id=kids;
            $("#sc").modal('show');
        }
        function dodelete(){
            $.post('${pageContext.request.contextPath}/taocan/shanchu',{taocan_Id:taocan_Id},function(data){
                if(data!=null){
                    searcha();
                    $("#sc").modal('hide');
                }
            })
        }


        /**
         * 添加套餐
         */
        function toadd() {
            $("#Div1").modal("show") ;
        }
        function taocanadd() {
            var taocan_Name=$('[name=taocan_Name]').val();
            var taocan_Jiage=$('[name=taocan_Jiage]').val();
            var shiyong_Date=$('[name=shiyong_Date]').val();
            var zhuangtai=$('[name=zhuangtai]:checked').val();
            var dp_Id=$('[name=dp_Id]').val();
            var beizhu=$('[name=beizhu]').val();
            $.post('${pageContext.request.contextPath}/taocan/insert',{taocan_Name:taocan_Name,taocan_Jiage:taocan_Jiage,shiyong_Date:shiyong_Date,zhuangtai:zhuangtai,dp_XianZhi:dp_Id,beizhu:beizhu},function (data) {
                if (data!=null){
                    searcha();
                    alert("添加成功!")
                    $("#Div1").modal('hide');
                } else {
                    alert("增加失败!");
                }
            })
        }

        <%--/**--%>
         <%--* 添加产品项目--%>
         <%--*/--%>
        <%--function adadd() {--%>
            <%--$("#Div2").modal('show');--%>
        <%--}--%>
        <%--function SPadd(){--%>
            <%--var shangpin_Name=$('[name=shangpin_Name]').val();--%>
            <%--var shangpin_Shoujia=$('[name=shangpin_Shoujia]').val();--%>
            <%--var shangpin_Fenlei=$('[name=shangpin_Fenlei]').val();--%>
            <%--var danwei=$('[name=danwei]').val();--%>
            <%--var shangpin_Shuliang=$('[name=shangpin_Shuliang]').val();--%>
            <%--$.post('${pageContext.request.contextPath}/chanpin/insert',{shangpin_Name:shangpin_Name,shangpin_Shoujia:shangpin_Shoujia,shangpin_Fenlei:shangpin_Fenlei,danwei:danwei,shangpin_Shuliang:shangpin_Shuliang},function (data) {--%>
                <%--alert(shangpin_Name)--%>
                <%--if (data!=null){--%>
                    <%--searcha();--%>
                    <%--$("#Div1").modal('hide');--%>
                <%--} else {--%>
                    <%--alert("增加失败");--%>
                <%--}--%>
            <%--})--%>
        <%--}--%>

    </script>

</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">套餐设置</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <form  class="form-inline pull-left" style="float: left;margin-top: -5px">
                    套餐关键字：<input id="username" type="text" class="form-control">
                    <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                </form>
                <div style="border: 1px solid #D3D8DB;height: 0px;background-color: #D3D8DB;margin-left:-15px;width: 210%;margin-top: 40px"></div>
                <div class="col-sm-6" style="margin-top: 7px;">
                    <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 15px">
            <div class="col-sm-12">
                <table id="taocan"></table>
            </div>
        </div>

        <div class="row" style="margin-top: 15px">
            <div class="col-sm-12">
                <table id="tianjiaxiangmu"></table>
            </div>
        </div>

    </div>
</div>

<!---删除模态框-->
<div class="modal fade" id="sc">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitleId">提示信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12" id="addrole" style="height: 100px">
                        <p>确认删除信息吗？</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary"onclick="dodelete()">删除</button>
            </div>
        </div>
    </div>
</div>

<!--添加套餐大模态框-->
<div class="modal inmodal fade" id="Div1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content animated bounceInLeft">
            <%--添加大模态框--%>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">编辑套餐</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="post" id="jiaoy">
                        <div class="form-group">
                            <div class="form-group">
                                <label for="taocan_Name" style="margin-left: 9px;" class="col-sm-2 control-label">套餐名称:</label>
                                <div class="col-sm-4">
                                    <input  type="text" name="taocan_Name" class="form-control" id="title1" placeholder="请输入项目名称">
                                </div>

                                <label for="taocan_Jiage" class="col-sm-1 control-label">售价:</label>
                                <div class="col-sm-4">
                                    <input  type="text" name="taocan_Jiage" class="form-control">
                                </div>
                            </div>
                        </div>

                        <div class="form-group" style="margin-top: -10px;">
                            <label for="shiyong_Date" class="col-sm-2 control-label">有效期:</label>
                            <div class="col-sm-2">
                                <input  type="text" name="shiyong_Date"  class="form-control">
                            </div>
                            <p style="font-size: 10px;color: red;position: absolute;margin-left: 300px;margin-top: 10px;">⭐会员绑定套餐后X天过期</p>

                            <label for="dp_Id" style="margin-left: 87px;" class="col-sm-2 control-label">店铺限制:</label>
                            <div class="col-sm-6" style="left: 520px;width: 600px;position: absolute;" >
                                <div class="col-sm-4">
                                    <select name="dp_Id"  class="form-control">

                                    </select>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="beizhu" class="col-sm-2 control-label">备注:</label>
                            <div class="col-sm-4">
                                <input  type="text" name="beizhu"  class="form-control" placeholder="请输入套餐备注">
                            </div>
                            <div class="form-group" style="margin-top: 5px">
                                <label for="zhuangtai" class="col-sm-1 text-right">状态:</label>
                                <div class="col-sm-4">
                                    <div class="radio-inline" style="margin-top: -8px">
                                        <input type="radio" name="zhuangtai" value="1" checked="checked" style="margin-top: 2px">
                                        启用
                                    </div>

                                    <div class="radio-inline" style="margin-top: -8px">
                                        <input type="radio" name="zhuangtai" value="2" style="margin-top: 2px">
                                        禁用
                                    </div>
                                </div>
                            </div>
                        </div>


                        <button class="btn btn-primary" onclick="adadd()" type="button">&nbsp;&nbsp;+添加项目</button>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary"  onclick="taocanadd()">确定</button>
                        </div>
                    </form>
                </div>
                <form ></form>
            </div>
        </div>
    </div>
</div>

<%--增加项目模态框--%>
<div class="ibox-content">
    <div class="modal inmodal" id="Div2" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">添加项目</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="post" id="hh">
                        <div>项目信息</div>
                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">名称:</label>
                            <div class="col-sm-9">
                                <input  type="text" name="shangpin_Name" class="form-control" id="title2" placeholder="请输入名称">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">商品售价:</label>
                            <div class="col-sm-9">
                                <input  type="text" name="shangpin_Shoujia" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt;>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="shangpin_Fenlei" class="col-sm-2 control-label">所属分类:</label>
                            <div class="col-sm-10">
                                <div class="col-sm-6">
                                    <select name="shangpin_Fenlei" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; style="margin-left: -14px">
                                        <option value="1">洗发水</option>
                                        <option value="2">吹风机</option>
                                        <option value="3">洗护用品</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="danwei" class="col-sm-2 control-label">单   位:</label>
                            <div class="col-sm-10">
                                <div class="col-sm-6">
                                    <select name="danwei" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; style="margin-left: -14px">
                                        <option value="1">瓶</option>
                                        <option value="2">支</option>
                                        <option value="3">套</option>
                                        <option value="4">次</option>
                                        <option value="5">副</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div>套餐信息</div>
                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">数量:</label>
                            <div class="col-sm-9">
                                <input  type="text" name="shangpin_Shuliang" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt;>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary"  onclick="SPadd()">确定</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
